@import "mixins/components-inputs";

.o-field {
  position: relative;

  .c-field:disabled ~ .c-icon {
    color: @field-disabled-border-color;
  }

  .c-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.o-field--icon-right {
  .c-field + .c-icon {
    right: @field-padding;
  }

  .c-field {
    padding-right: @field-padding * 4;
  }
}

.o-field--icon-left {
  .c-icon:first-child {
    left: @field-padding;
  }

  .c-field {
    padding-left: @field-padding * 4;
  }
}

.c-fieldset,
.c-fieldset.c-list {
  display: block;
  width: @fieldset-width;
  margin: @fieldset-margin;
  padding: @fieldset-padding;
  border: @fieldset-border;
}

.c-fieldset__legend {
  .label();
  padding: @legend-padding;
}

// LABELS
.c-label {
  .label();
}

// TEXT FIELDS
.c-field {
  display: block;
  width: 100%;
  margin: @field-margin;
  padding: @field-padding;
  border: @field-border;
  border-radius: @field-border-radius;
  outline: 0;
  background-color: @field-background-color;
  font-family: inherit;
  font-size: @field-font-size;
  font-weight: @field-font-weight;
  resize: vertical;
  appearance: none;

  &:focus {
    border-color: @field-focus-border-color;
    box-shadow: @field-focus-box-shadow;
  }
}

// SELECTS, CHECKBOXES AND RADIOS
select.c-field {
  cursor: pointer;

  &::-ms-expand {
    display: none;
  }
}

// SELECTS
select.c-field:not([multiple]) {
  padding-right: 1em;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: 99% 50%;
}

// CHECKBOXES and RADIOs
.c-field input {
  margin-right: @checkbox-margin;
  outline: 0;
  font-size: @checkbox-font-size;
}

.c-field--label {
  margin: @label-field-margin;
}

.c-field--error {
  border-color: @field-error-border-color;
  color: @field-error-color;
}

.c-field--success {
  border-color: @field-success-border-color;
  color: @field-success-color;
}

.c-field--choice {
  border: @checkbox-border;
  border-radius: 0;
  background-color: @checkbox-background-color;
}

.c-fieldset--disabled .c-field,
.c-fieldset:disabled .c-field,
.c-field--disabled,
.c-field:disabled {
  .field--disabled();

  &.c-field--choice {
    background-color: @checkbox-background-color;
  }
}

.c-field input:disabled {
  .disabled();
}
